<template>
  <div class="shoppingcart">
    <Heads types="shopcart" title="购物车"></Heads>

    <div class="content">
      <div v-if="cartListOfType(0).length>0">
        <div v-for="(item) in cartListOfType(0)" :key="item.goodsId+item.selectedId">
          <van-swipe-cell>
            <!-- 内容 -->
            <van-checkbox-group v-model="checkGroupArr">
              <van-card
                style="text-align: left; margin: 3px;"
                :thumb="item.goods_info.picture"
                :price="item.goods_info.price | decimalPoint"
                origin-price="999.00"
              >
                <div
                  slot="title"
                  class="van-ellipsis title"
                >{{item.goods_info.title}}</div>
                <div slot="desc">
                  <p>规格: {{item.s1}} | {{item.s2}}</p>
                </div>
                <!-- <div slot="tag">
                  <van-checkbox style="border:.025rem solid rgb(189, 67, 10);border-radius:50%;" :value="item" checked-color="#ff5f16" :name="item" />
                </div>-->
                <div slot="tags">
                  <van-tag plain type="danger">new</van-tag>
                </div>
                <div slot="footer">
                  <div class="footer-left">
                    <van-checkbox
                      label-position="left"
                      :value="item"
                      checked-color="#ff5f16"
                      :name="item"
                    >勾选:</van-checkbox>
                  </div>
                  <div class="foter-right">
                    <van-stepper
                      v-model="item.selectedNum"
                      disabled-input
                      @minus="addsubFunc(item)"
                      @plus="addsubFunc(item)"
                    />
                  </div>
                </div>
              </van-card>
            </van-checkbox-group>
            <!-- 删除 -->
            <van-button
              slot="right"
              style="height: 100%;"
              square
              text="删除"
              @click="remove(item)"
              type="danger"
              class="delete-button"
            />
          </van-swipe-cell>
        </div>
      </div>
      <div v-else>
        <van-empty description="购物车空空如也~~~" />
      </div>
    </div>

    <div class="submit">
      <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
        <van-checkbox checked-color="#ff5f16" v-model="checkAll">全选</van-checkbox>
        <van-button
          v-if="checkGroupArr.length>0"
          @click="deleteAll"
          type="danger"
          size="mini"
          class="ml"
        >删除选中</van-button>
        <!-- <span slot="tip"> 你的收货地址不支持同城送, <span>修改地址</span> </span> -->
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState, mapActions, mapGetters } from 'vuex'
import { post } from '@/utils/axios'
import Vue from 'vue'
import { Toast, Card, Tag, Button, SubmitBar, Checkbox, Stepper, CheckboxGroup, SwipeCell, Empty } from 'vant'
Vue
  .use(Toast)
  .use(Card)
  .use(Tag)
  .use(Button)
  .use(SubmitBar)
  .use(Checkbox)
  .use(Stepper)
  .use(CheckboxGroup)
  .use(SwipeCell)
  .use(Empty);

export default {
  data() {
    return {
      checkGroupArr: [],
      // cartList: []
    }
  },
  computed: {
    ...mapState('userModule', ['token']),
    // ...mapState('cartModule', ['cartList']),
    ...mapGetters('cartModule', ['cartListOfType']),
    /**
     * 全选
     */
    checkAll: {
      get: function () {
        if (this.cartListOfType(0).length !== 0 && this.cartListOfType(0).length === this.checkGroupArr.length) {
          return true
        } else {
          return false
        }
      },
      set: function (newVal, oldVal) {
        if (newVal) {
          this.checkGroupArr = [...this.cartListOfType(0)]
        } else {
          this.checkGroupArr = []
        }
      }
    },
    /**
     * 总计
     */
    totalPrice: {
      get: function () {
        let total = 0
        this.checkGroupArr.forEach((item, i) => {
          total += item.goods_info.price * item.selectedNum
        })
        // 默认两位(组件)-仅支持数字
        return (total * 1)
      },
      /**
       * 选中即为true
       */
      deleteSelected: {
        get: function () {
          if (this.checkGroupArr.length > 0) {
            return true
          } else {
            return false
          }
        }
      }
    }
  },
  methods: {
    ...mapMutations('footerModule', ['FOOTERSHOW']),
    ...mapMutations('payModule', ['SETTYPES', 'SETLIST']),
    ...mapActions('cartModule', ['getCartListAction', 'deleteSelectCart']),
    /**
     * 结账
     */
    onSubmit() {
      // console.log('提交')
      this.SETTYPES('list')
      this.SETLIST(this.checkGroupArr)
      this.$router.push({ name: 'Paymentpage' })
    },
    /**
     * 加减-返回后调用重新获取购物车信息
     */
    addsubFunc(item) {
      post({
        url: '/hybrid/uni/addsub',
        data: {
          item
        }
      }).then(res => {
        if (res.status >= 0) {
          this.getCartListAction()
          this.checkGroupArr = []
        } else {
          Toast({
            message: '操作失败~~~',
            closeOnClick: true
          })
        }
      })
    },
    /**
     * 左滑删除单个
     */
    remove(item) {
      post({
        url: '/hybrid/uni/cart-delete',
        data: {
          cartid: item.cartid
        }
      }).then(res => {
        if (res.status >= 0) {
          this.getCartListAction()
          this.checkGroupArr = []
        } else {
          Toast({
            message: '操作失败~~~',
            closeOnClick: true
          })
        }
      })
    },
    /**
     * 删除选中
     */
    deleteAll() {
      this.deleteSelectCart(this.checkGroupArr.map(item => item.cartid))
      this.checkGroupArr = []
    }
  },
  mounted() {
    this.FOOTERSHOW(false)
    if (this.token) {
      this.getCartListAction()
    } else {
      this.$router.push({ name: 'User-type', params: { type: 'login' } })
      Toast({
        message: '请先去登录吧~',
        closeOnClick: true
      })
    }
    // console.log(1,this.cartListOfType(0))
  },
  destroyed() {
    this.FOOTERSHOW(true)
  }
}
</script>

<style lang='scss' scoped>
.title {
  padding: 4px 0;
}
.ml {
  margin-left: 6px;
}
.shoppingcart {
  .content {
    margin-top: 5px;
    padding-bottom: 50px;
    overflow-y: auto;
    .van-swipe-cell {
      margin: 2px 0;
      .van-card__footer {
        .footer-left {
          width: 50vw;
          float: left;
          .van-checkbox {
            margin-top: 5px;
          }
        }
        .footer-right {
          width: 50vw;
          float: right;
        }
      }
    }
  }
  .submit {
    .van-submit-bar {
      position: fixed;
      bottom: 0;
      height: 50px;
    }
  }
}
</style>
